import React , { Component } from 'react';
import './index.css';
import { Switch,Route,Link, Redirect} from 'react-router-dom';
import { Layout, Menu, message,Collapse } from 'antd';
import { dataShowMenuList } from '../../config/proMenuList';
import {connect} from 'react-redux';
import { setDocInReducer,setMbInReducer,setDefaultMbInReducer } from '../../redux/actions';

import TwoDimShow from './data-show-pages/two-dim-show';
import ThreeDimShow from './data-show-pages/three-dim-show';
import ThreeShowDemo from '../../components/three/three_show_demo'
import DataComparison from './data-show-pages/data-comparison';
import OriginalData from './data-show-pages/original-data';
import DataComparisonSider from './data-show-pages/data-comparison-sider';
import TwodimshowSider from './data-show-pages/two-dim-show-sider';
import ThreedimshowSider from './data-show-pages/three-dim-show-sider';
import downIcon from '../../assets/image/down.png'
//import Backend from 'react-dnd-html5-backend';
//import { DndProvider } from 'react-dnd';



const { SubMenu } = Menu;
const { Content, Sider } = Layout;
const { Panel } = Collapse;

class DataShow extends Component {

  constructor(props) {
    super(props);
    this.state= {
      subkey:'',
    }
  };

  handleSave = () => {    // 保存按钮
    message.success("保存成功！");
  };

  // to_two_dim_show(key){
  //   this.props.history.push('/data-show/two-dim-show')
  // }

  // to_data_comparison(key){
    
  // }

  // to_two_dim_show(key){
  //   this.props.history.push('/#/data-show/two-dim-show')
  // }

  changeItem = (e)=>{
    console.log("111",e)
    if(e==0){
      this.props.history.push('/data-show/two-dim-show')
    }else if(e==1){
      this.props.history.push('/data-show/three-dim-show')
    }else if(e==2){
      this.props.history.push('/data-show/data-comparison')
    }else if(e==3){
      this.props.history.push('/data-show/original-data')
    }
  }

  dataShowMenuListShow = (dataShowMenuList) => {
    return dataShowMenuList.map( (item) => {  //item指的是标签数组项
        if(!item.children) {  // 如果item中没有children，则返回Menu.Item标签数组
          
            return (
                <Panel showArrow={false} header={item.title} >  {/**#1890ff */}
                {/* <Menu.Item key={item.key} icon={item.icon}>
                    <Link to={item.key} style={{color:"#1890ff"}}>{item.title}</Link>
                </Menu.Item> */}
                
                </Panel>
            )
        }else {   // 如果item中有children，则返回SubMenu标签数组
          if(item.children==='1'){
            return (
              <Panel header={item.title} >  {/**#1890ff */}
              {/* <SubMenu key={item.key} icon={item.icon} title={<span style={{color:"#1890ff"}}>{item.title}</span>}  onTitleClick={(key)=>this.to_two_dim_show(key)}> */}
               <TwodimshowSider/> 
              {/* </SubMenu> */}
              </Panel>
              
            )
          }
          else if(item.children==='2'){     // 三维曲线展示
            return (
              <Panel header={item.title} >  {/**#1890ff */}
              {/* <SubMenu key={item.key} icon={item.icon} title={<span style={{color:"#1890ff"}}>{item.title}</span>}  onTitleClick={(key)=>this.to_two_dim_show(key)}> */}
                <ThreedimshowSider/> 
              {/* </SubMenu> */}
              </Panel>
            )
          }
          else if(item.children==='3'){
            return (
              <Panel  header={item.title} >  {/**#1890ff */}
              {/* <SubMenu key={item.key} icon={item.icon} title={<span style={{color:"#1890ff"}}>{item.title}</span>}  onTitleClick={(key)=>this.to_data_comparison(key)} > */}
                  <DataComparisonSider />
                  {/* {this.dataShowMenuListShow(item.children)}        */}
              {/* </SubMenu> */}
              </Panel>
            )
          }   
        }
    })
  }

  render() {
    const pathname = this.props.location.pathname;
    // console.log("path",this.props.location.pathname)
    return ( 
      // <DndProvider backend={Backend}>
        <Layout className="data-show-wrapper">
          <Sider 
            className="data-show-sider" 
            width='300px'
          >
            {/* <div className="logo" /> */}
            <Menu theme="white" mode="inline" style={{ height: '100%'}} selectedKeys={pathname}>
              <Collapse accordion onChange={(e)=>{this.changeItem(e)}} expandIconPosition='right' ghost={true}
              expandIcon={({ isActive }) => <div><div><img src={downIcon} alt="" style={{ transform: isActive ? 'rotate(0deg)' : 'rotate(-180deg)', transition: 'transform 0.24s', display: 'block' }}></img></div></div>}
              >
              {
                this.dataShowMenuListShow(dataShowMenuList)
              }
              </Collapse>
            </Menu>
          </Sider>
          <Layout style={{margin:'0 10px 0 20px',overflow: 'auto',border: '1px solid #00A8F6'}}>
            <Content>
              <div className="site-layout-background" style={{ minHeight: 360,background:'none',margin:0,padding:0 }}>
                <Switch>
                  <Route path='/data-show/two-dim-show' component={TwoDimShow} />
                  <Route path='/data-show/three-dim-show' component={ThreeDimShow} />
                  <Route path='/data-show/data-comparison' component={DataComparison} />
                  <Route path='/data-show/original-data' component={OriginalData} />
                  <Redirect to='/data-show/two-dim-show' />
                </Switch> 
              </div>
            </Content>  
          </Layout>
        </Layout>

      // </DndProvider>
      
    )
  }
}

export default  connect(
  state => ({user: state.user, defaultmbData: state.defaultmbData}),  // 获取 数据处理页面列表，没有传入曲线数据前，获取的是 道列表，也就是默认模板
  {setDocInReducer,setMbInReducer,setDefaultMbInReducer}        //getDaosMbShow,
)(DataShow);